<template>
  <div>
    <!---组件库形式-->
    <div v-if="tabObj.layout == 'paneTab'" class="f fs14 tc rel bdbe">
      <div @click="changeTab(item)" v-for="(item) in tabObj.list" :key="item.id" :class="['mr15 poi pb10', item.isChecked ? 'b gec6102' : '']" :style="{ width: maxWidth + 'px' }">{{item.name}}</div>
      <div class="abs b0 trans3 bgec6102 rds5" :style="{ width: maxWidth + 'px', height: '2px', transform: `translateX(${(maxWidth + 15 ) * tabIndex}px)` }"></div>
    </div>
    <!---圆形切换-->
    <div v-if="tabObj.layout == 'roundTab'" class="f">
      <div
        v-for="(item, index) in tabObj.list"
        :key="item.id"
        @click="changeTab(item)"
        :class="['f ac xc pl15 pr15 pt8 pb8 fs14 poi trans3 none', item.isChecked ? 'bgec6102 gf' : 'bgf g7', index == 0 && index == tabObj.list.length - 1 ? 'rdsl2 rdsr2 bdtc bdbc bdlc bdrc' : index == 0 ? 'rdsl2 bdtc bdbc bdlc bdrc' : index == tabObj.list.length - 1 ? 'rdsr2 bdtc bdbc bdrc' : 'bdtc bdbc bdrc']"
        :style="tabObj.roundTab ? tabObj.roundTab.style : ''"
      >
        {{ item.name }}<span v-if="item.count!=='' && item.count!=undefined && item.count!=null">({{item.count}})</span>
      </div>
    </div>
  </div>
</template>
<script setup>
/*
  <TabRender :tabObj="tabObj" @setTabObj="e => tabObj = e" @changeTab="e => changeTab(e)"></TabRender>
  ================数据=================
  const tabObj = ref({
    list: [
      {name:'全部随访', value: '0', count:'3116', isChecked: true, id: _.guID()},
      {name:'待随访', value: '1', count:'2978', isChecked: false, id: _.guID()},
      {name:'已随访', value: '2', count:'95', isChecked: false, id: _.guID()},
      {name:'已取消', value: '3', count:'34', isChecked: false, id: _.guID()}
    ],
    layout: 'paneTab', // paneTab:显示组件库类型的   roundTab: 显示圆角类型的
  })
  用户点击的时候会触发changeData
*/
  import { ref, computed } from "vue"
  const props = defineProps({
    tabObj: {type: Object, default: () => ({}) },
  })
  const emit = defineEmits(['setTabObj', 'changeTab'])
  let maxWidth = computed(() => _.range(_.safeGet(() => props.tabObj.list.map(v => v.name).sort((a, b) => a - b)[0].length * 18, 60), 60))
  let tabIndex = computed(() =>props.tabObj.list.findIndex(v => v.isChecked))
  /*************************************** */
  /**************function***************** */
  /*************************************** */
  // 改变tab
  const changeTab = (item) => {
    const list = _.radioChecked(props.tabObj.list, {id: item.id})
    const tabObj = { ...props.tabObj, list }
    emit('setTabObj', tabObj)
    emit('changeTab', {...item, isChecked: true})
  }
</script>
<style scoped>
.rdsl2{
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;;
}
.rdsr2{
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.bdtc{
  border-top: 1px solid #ec6102;
}
.bdbc{
  border-bottom: 1px solid #ec6102;
}
.bdrc{
  border-right: 1px solid #ec6102;
}
.bdlc{
  border-left:1px solid #ec6102;
}
</style>